Skip to content

Unicidad del nombre de landmarks ​

Nombrar una región es solo la mitad del trabajo. Si dos navegaciones de la misma página se llaman ambas "Main navigation", el lector de pantalla las anuncia igual y el usuario vuelve al punto de partida: sigue sin poder distinguirlas.

Esta revisión busca regiones del mismo tipo que comparten nombre.


Qué comprueba la herramienta ​

La herramienta agrupa las regiones de la página por tipo, lee el nombre de cada una y busca repeticiones dentro de cada grupo.

El nombre se toma del primero de estos que esté presente:

  1. aria-label
  2. aria-labelledby — el texto del elemento al que apunta
  3. title

Antes de comparar, los nombres se normalizan: se ignoran mayúsculas y minúsculas, y se eliminan los espacios sobrantes al inicio y al final. Así que "Main navigation", "main navigation" y " MAIN NAVIGATION " cuentan como el mismo nombre.


Por qué importa ​

Un usuario de lector de pantalla que abre la lista de regiones ve "navegación, navegación" y tiene que adivinar. Los nombres existen, así que a un desarrollador que ve la página nada le parece roto, pero el usuario no gana nada con ellos.


Cuándo reporta un problema ​

Dos o más regiones visibles del mismo tipo comparten el mismo nombre, una vez ignoradas mayúsculas y espacios.

html
<nav aria-label="Main navigation">...</nav>
<nav aria-label="main navigation">...</nav>

Se genera un issue por cada región afectada, y el reporte indica el tipo de región, el nombre repetido y cuántas instancias lo comparten.


Tipos de región cubiertos ​

ElementoTipo de región
<header> (a nivel de página)banner
<nav>navigation
<main>main
<aside>complementary
<footer> (a nivel de página)contentinfo
<section> (con nombre)region
<form> (con nombre)form
Cualquier elemento con un rol de landmark (role="search", etc.)el tipo correspondiente

Cuándo no reporta ​

  • Todas las regiones de un tipo tienen un nombre distinto.
  • Solo hay una región de ese tipo — no hay con qué chocar.
  • Regiones ocultas (display: none, visibility: hidden, aria-hidden="true").
  • <header> y <footer> anidados dentro de otros contenedores — no son regiones a nivel de página.
  • <section> y <form> sin nombre — no se exponen como regiones.
  • Regiones sin nombre alguno. Ese es otro problema, cubierto por Etiqueta accesible de landmarks.

Qué dice el reporte ​

Título: Page has multiple [region type] landmarks without unique names

Descripción: The page has multiple [region type] landmarks announced just as '[nombre repetido]'.

Resultado actual: The page has multiple [region type] landmarks with the same accessible name.

Resultado esperado: Each landmark of the same type should have a unique and descriptive accessible name.

Checkpoint WCAG: 1.3.1 - Info and Relationships


Cómo corregirlo ​

Dale a cada región un nombre que diga para qué sirve, no solo qué es:

html
<nav aria-label="Main navigation">...</nav>
<nav aria-label="Footer navigation">...</nav>

Cómo verificarlo a mano ​

  1. Abre la página y activa un lector de pantalla.
  2. Navega por regiones — la tecla D en NVDA.
  3. Escucha si dos regiones del mismo tipo se anuncian con las mismas palabras.

Referencia WCAG ​

Criterio de conformidad 1.3.1 Información y relaciones (Nivel A)